<template>
  <section class="child_page">
    <img :src="bgImg" class="backgroundImg" alt="">
    <head-top logoPart="登录"></head-top>
    <section class="login">
      <h3 class="title">
        <svg width="50vw" height="60px">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use>
        </svg>
      </h3>
      <div class="useid" :class="{'useid_border' : borderColor}">
        <div class="mark">帐号:</div>
        <div class="input_mark"><input type="text" placeholder="手机号" v-model="inputaccounts" @input="inpuMark" @click="accountsMark" /></div>
        <div class="svg_close" v-if="accounts" @click="clearMark">
          <svg fill="#c3c3c3">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"></use>
          </svg>
        </div>
      </div>
      <div class="useid" :class="{'useid_border' : borderColortwo}">
        <div class="mark">密码:</div>
        <div class="input_mark"><input type="password" placeholder="密码" maxlength="16" @input="inpuCode" v-model="inputcode" @click="accountsCode" /></div>
        <div class="svg_close" v-if="code" @click="clearCode">
          <svg fill="#c3c3c3">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"></use>
          </svg>
        </div>
      </div>
      <div class="login_botton" @click="loginSuccess">
        登 录
      </div>
      <router-link to="/register" class="register">我要去注册</router-link>
    </section>
  </section>
</template>

<script>
import headTop from "src/components/header/head";
import { mapMutations } from "vuex";
import { login } from "src/service/getData";
export default {
  data() {
    return {
      bgImg: require('../../../../images/bg_1x.png'),
      inputaccounts: "", //帐号
      inputcode: "", //密码
      accounts: false, //清除帐号
      code: false, //清除密码
      borderColor: true, //下边框颜色
      borderColortwo: false
    };
  },
  created() {},
  mounted() {},
  components: {
    headTop
  },
  computed: {},
  methods: {
    test() {},
    ...mapMutations(["SAVE_MESSAGE", "DIALOG_COVER", "GET_USERINFO"]),
    inpuMark() {
      this.inputaccounts ? (this.accounts = true) : (this.accounts = false);
    },
    inpuCode() {
      this.inputcode ? (this.code = true) : (this.code = false);
    },
    accountsMark() {
      this.borderColor = true;
      this.borderColortwo = false;
    },
    accountsCode() {
      this.borderColor = false;
      this.borderColortwo = true;
    },
    clearMark() {
      this.inputaccounts = "";
      this.accounts = false;
    },
    clearCode() {
      this.inputcode = "";
      this.code = false;
    },
    async loginSuccess() {
      if (this.inputaccounts) {
        try {
          const res = await login({
            username: this.inputaccounts,
            password: this.inputcode
          });
          if (res.status == 200) {
            localStorage.setItem("user_id", res.user_info.id.toString());
            this.GET_USERINFO(res.user_info);
            this.$router.push("/dialogue");
          } else {
            this.DIALOG_COVER(res.message);
          }
        } catch (err) {
          console.log("登录失败", err);
          this.DIALOG_COVER("登录失败");
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "src/style/public";
.title {
  font-weight: 600;
  color: #333;
  text-align: center;
  margin-bottom: 2.5rem;
}
.register {
  display: block;
  line-height: 3em;
  text-decoration: underline;
  text-align: center;
  @include sizeColor(0.5em, #fff);
}
.child_page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-color: #fff;
  .backgroundImg {
    position: fixed;
    z-index: -1;
    width: 100vw;
    height: calc(100vh);
  }
}
.login {
  padding-top: 2.6rem;
  width: 14.3786666667rem;
  margin: 0 auto;
  .useid {
    width: 100%;
    border-bottom: 1px solid #d4d4d4;
    @include justify(flex-start);
    align-items: center;
    .mark {
      @include sizeColor(0.64rem, #fff);
      letter-spacing: 0.5546666667rem;
      line-height: 2.0266666667rem;
      padding-left: 0.4266666667rem;
    }
    .input_mark {
      margin-right: 0.34rem;
      // margin-left: 1rem;
      @include widthHeight(9.1rem, 2.0266666667rem);
      input {
        display: inline-block;
        width: 9.1rem;
        line-height: 2rem;
        background: transparent;
        @include sizeColor(0.64rem, #FFF);
      }
    }
    .svg_close {
      @include widthHeight(0.64rem, 0.64rem);
      svg {
        display: block;
        @include widthHeight(100%, 100%);
      }
    }
  }
  .useid_border {
    border-color: #eee;
  }
  .login_botton {
    margin-top: 1.536rem;
    text-align: center;
    // background: #1aad19;
    background: transparent;
    border: 1px solid #eee;
    border-radius: 5px;
    line-height: 1.6rem;
    @include sizeColor(0.7rem, #fff);
  }
}
</style>